
<template>
    <div class="container" v-if="data">
    <el-container>
        <el-aside :style="{width: (isCollapse==true ? '64px': '200px')}">
            <el-menu default-active="1-4-1" class="left-menu el-menu-vertical" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <el-menu-item index="1" class="logo">
                    <i class="el-icon-coffee-cup"></i>
                    <span class="logo-text">
                        <a href="./">Web Nav</a>
                    </span>
                </el-menu-item>
                <!-- <el-menu-item index="2">
                    <i class="el-icon-star-on"></i>
                    <span slot="title">我的收藏</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-location"></i>
                    <span slot="title">常用网址</span>
                </el-menu-item> -->
                <template index="2" v-for="(item,index) in data" >
                    <el-menu-item v-if="! item.children && childrenList.indexOf(index) < 0" :key="index">
                        <i :class="item.icon ? item.icon : 'el-icon-setting'"></i>
                        <span slot="title" @click="onlink(item.id)">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header class="header">
                <el-row type="flex" class="row-bg" justify="space-between">
                    <el-col :span="10">
                        <el-radio-group v-model="isCollapse" class="group">
                            <el-radio-button :label="true">
                                <i class="el-icon-caret-left"></i>
                            </el-radio-button>
                            <el-radio-button :label="false">
                                <i class="el-icon-caret-right"></i>
                            </el-radio-button>
                        </el-radio-group>
                    </el-col>
                    <el-col :span="14" class="t-r"><div class="grid-content bg-purple">
                        <el-input v-model="search" placeholder="请输入内容搜搜..." class="search" @on-enter="searchData"/>
                        <span class="search-text"><el-button type="primary" icon="search" @click="searchData">搜索</el-button></span>
                        <el-button type="success" icon="plus-round" @click="resetSearch" v-show="searchStatus" >重置</el-button>
                        <el-switch
                            v-if="isEdit"
                            v-model="editValue"
                            active-text="编辑"
                            inactive-text="NO" 
                            @change="changeEdit">
                        </el-switch>
                        <!-- <el-button type="success" icon="plus-round" @click="onEdit" v-show="true" >编辑</el-button> -->
                    </div></el-col>
                </el-row>
            </el-header>
            <el-main class="main">
                <nav-sub :data="data" :editStatus="editStatus"></nav-sub>
                 <el-footer class="footer">
                    ©{{ year }} 作者：Galen ｜前端工程师 <a href="https://github.com/gqzydh" target="_blank">GitHub</a>
                </el-footer>
            </el-main>
            <el-backtop>
                <i class="el-icon-top" style="font-size: 27px;"></i>
            </el-backtop>
        </el-container>
    </el-container>
    </div>
</template>
<script>
import NavSub from '@/components/card/sub'
import { mapActions, mapGetters } from 'vuex'
// import Data from '@/data/data'
export default {
    data () {
        return {
            isCollapsed: false,
            search: '',
            searchStatus: false,
            data: null,
            childrenList: [],
            sourceData: '',
            serarchNum: 0,
            spinShow: false,
            editStatus: false,
            editValue: false,
            isCollapse: false,
            isEdit: false,
            year: "2023"
        }
    },
    computed: {
        ...mapGetters([
            'favoriteList',
            'usedList',
            'ifEdit'
        ]),
        menuitemClasses: function () {
            return [
                'menu-item',
                this.isCollapsed ? 'collapsed-menu' : ''
            ]
        }
    },
    created: function() {
        window.console.group('------Create创建前状态------');
        this._getData()
    },
    mounted() {
        const host = window.location.host
        console.log("url", host.includes('localhost'), this.ifEdit);
        if(host.includes('localhost')){
            this.isEdit = true
            // this.editValue = true
            // this.ifEdit = true
            // this.saveEditStatus(true)
        }
        // if(this.ifEdit ){
        //     this.editValue = this.ifEdit
        // }
    },
    methods: {
        _getData() {
            this.spinShow = true;
            this.$axios
              .get("/data/nav.json") // 获取nav数据
              .then(rep => {
                  this.data = rep.data;
                  for (let key in this.data) {
                    if (this.data[key].hasOwnProperty("children")) {
                      this.childrenList = this.childrenList.concat(this.data[key].children);
                    }
                  }
                  this.spinShow = false;
              })
              .catch(e => {
                  this.$message.error({
                      content: "获取数据失败!",
                      duration: 120,
                      closable: true
                  });
                  window.console.log("错误信息：",e);
              });
        }, 

        jumpAnchor (name) {
          if (document.documentElement.clientWidth <= 768 ){
            this.isCollapsed = true
          }

          let offset = 66; 
          let el = document.querySelector('#' + name); 
          window.scroll({ top: (el.offsetTop - offset), left: 0, behavior: 'smooth' });
        },
        searchData () {
            if (typeof this.search === 'undefined' || this.search === null || this.search === '') {
                this.$message.error('输入内容呀！');
                return true
            }
            if (!this.searchStatus) {
                this.sourceData = JSON.parse(JSON.stringify(this.data))
            } else {
                this.data = JSON.parse(JSON.stringify(this.sourceData))
            }
            this.searchStatus = true
            this.serarchNum = 0
            for (let d in this.data) {
                if ( ! this.data[d].hasOwnProperty("nav")) {
                  continue
                }
                for (let i = 0; i < this.data[d]['nav'].length; i++) {
                    if (this.data[d]['nav'][i]['name'].toLowerCase().indexOf(this.search.toLowerCase()) === -1) {
                        if (this.data[d]['nav'][i]['link'].toLowerCase().indexOf(this.search.toLowerCase()) === -1) {
                            this.data[d]['nav'].splice(i--, 1)
                        } else {
                            this.serarchNum++
                        }
                    } else {
                        this.serarchNum++
                    }
                }
            }
            if (this.serarchNum === 0) {
                this.$message.error('没找到哦，请重试!')
            } else {
                this.$Message.success('查找到了' + this.serarchNum + '个相近的.')
            }
        },
        onlink(id) {
            console.log("object", id);
            let toElement = document.getElementById(id)
              toElement.scrollIntoView()
        }, 
        resetSearch () {
            this.spinShow = true
            this.searchStatus = false
            this.search = ''
            this.serarchNum = 0
            this.data = JSON.parse(JSON.stringify(this.sourceData))
            setTimeout(() => {
                this.spinShow = false
            }, 1000)
        },
        changeEdit() {
            console.log("object", this.editValue);
            if(this.editValue) {
                this.editStatus = true
                this.saveEditStatus(true)
            } else {
                this.editStatus = false
                this.saveEditStatus(false)
            }
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        ...mapActions(['saveEditStatus']),
    },
    components: {
        NavSub
    }
}
</script>

<style lang="less" scoped>
.container{
    position: relative;
}
.content{
    position: absolute;
    width: 100%;
    top: 60px;
    // margin: 80px 20px 0;
    // background: #fff;
    // min-height: 500px;
}
.minwidth{
    width: 200px;
}
.left-menu {
    position: fixed;
    height: 100vh;
    left: 0;
    background-color: #30333c;
    color: #fff;
    line-height: 2;
    z-index: 2;
    .el-menu-item{
        height: 42px;
        line-height: 42px;
        color: #6b7386;
        &:hover{
            background: none;
            color: #fff
        }
    }
    .logo{
        height: 56px;
        line-height: 56px;
        text-align: center;
        .logo-text{
            a{
                // background-color: #fff8ee;
                color: #f5f7f9;
                font-size: 23px;
                font-weight: bolder;
                white-space: nowrap;
                text-shadow: 0 1px 2px #ff9900;
                text-decoration: none;
            }
        }
    }
}
.header{
    // position: fixed;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    padding:10px ;
    z-index: 2;
}
.main{
    flex-direction: column;
    display: flex;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    overflow: initial;
    // padding-top: 76px;
}
.footer{
    text-align: center;
    line-height: 60px;
    color: #6b7386;
}
.layout-header-bar{
    position: fixed; 
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
    z-index: 99;
    .header-r{
        text-align: right;
        padding-right: 230px;
    }
}
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
.ivu-layout-sider {
    z-index: 100;
}
.logo-con img {
    width: 180px;
    margin: 10px;
}
.search {
    margin-left: 10px;
    width: 200px;
    @media screen {
        @media (max-width: 768px) {
            width: auto;
        }
    }
}
.search-text {
    margin: 0 10px;
    @media screen {
        @media (max-width: 768px) {
            margin: 0 3px;
        }
    }
}
.ivu-layout-header {
    @media screen {
        @media (max-width: 768px) {
            padding: 0 0 0 20px;
        }     
    }
}
.layout-right {
    margin-left: 200px;
    @media screen {
      @media (max-width: 768px) {
          margin-left: 0;
      }     
  }
}
</style>